<template>
	<view class="detail">
		<template v-if="postDetail && configJSON && editorConfigsJSON">
			<!-- 标题 -->
			<view class="title" v-if="postDetail.title">{{postDetail.title}}</view>
			<!-- 匿名用户 -->
			<view class="author" v-if="postDetail.isAnonymous">
				<view class="avatar">
					<image :src="postDetail.author.avatar" mode="widthFix"></image>
				</view>
				<view class="author-center">
					<view class="author-center-top">
						<text class="nickname">{{$t('contentAuthorAnonymous')}}</text>
						<text class="roleName"></text>
					</view>
					<view class="author-center-bottom">
						{{postDetail.createdTimeAgo}}
					</view>
				</view>
			</view>
			<!-- 不是匿名 -->
			<view
				class="author"
				v-else
				@click="$_to('user/detail?uid=' + postDetail.author.uid)">
				<view class="avatar">
					<image :src="postDetail.author.avatar" mode="widthFix"></image>
				</view>
				<view class="author-center">
					<view class="author-center-top">
						<text class="nickname" :style="'color:'+postDetail.author.nicknameColor+';'">{{postDetail.author.nickname}}</text>
						<text class="roleName">{{postDetail.author.roleName}}</text>
					</view>
					<view class="author-center-bottom">
						<view class="createdTimeAgo">{{postDetail.createdTimeAgo}}</view>
						<view
							class="post-geotag"
							v-if="postDetail.geotag"
							@click.stop="cliclGeotagButton(postDetail.geotag.latitude,postDetail.geotag.longitude)">
							<text class="iconfont icon-dingwei1"></text>
							<text>{{postDetail.geotag.name}}</text>
						</view>
					</view>
				</view>
				<view
					class="author-center-right"
					@click="$_to('user/detail?uid=' + postDetail.author.uid)">
					<view>{{$t('view')}}</view>
				</view>
			</view>
			<!-- 钩子 -->
			<mp-html
				v-if="configJSON.hook"
				:content="configJSON.hook[0].html"
				:selectable="true"/>
			<!-- 正文内容 -->
			<view class="content">
				<mp-html
					:content="$_content(postDetail.content)"
					:tag-style="configJSON.contentTagStyle"
					:selectable="true"
					style="font-size: 32rpx;line-height: 50rpx;"/>
			</view>
			<!-- 钩子 -->
			<mp-html
				v-if="configJSON.hook"
				:content="configJSON.hook[1].html"
				:selectable="true"/>
			<view
				class="quoted-post"
				v-if="postDetail.quotedPost"
				@click="$_to('post/detail?pid=' + postDetail.quotedPost.pid)">
				<text class="iconfont icon-yinyong1"></text>
				<text>{{postDetail.quotedPost.title?postDetail.quotedPost.title:$_filterHtml(postDetail.quotedPost.content)}}</text>
			</view>
			<!-- 附件 -->
			<view
				class="file"
				v-if="postDetail.files.images.length || postDetail.files.videos.length || postDetail.files.audios.length || postDetail.files.documents.length">
				<view class="file-title">
					<view></view><text>{{$t('file')}}</text>
				</view>
				<view style="padding:0 25rpx;">
					<public-list-files :item="postDetail.files"></public-list-files>
				</view>
			</view>
			<!-- 点赞列表 -->
			<view class="like-list" v-if="postLikeList.length">
				<view
					v-for="(item,index) in postLikeList"
					:style="'z-index:' + index + ';'">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="_more" @click="$_to('post/listLike?pid=' + postPid)">
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<!-- 所属小组 -->
			<view
				class="group"
				v-if="postDetail.group"
				@click="$_to('group/detail?gid=' + postDetail.group.gid)">
				<view class="group-cover" v-if="postDetail.group.cover">
					<image :src="postDetail.group.cover" mode="widthFix"></image>
				</view>
				<view class="group-name-post-count-comment-count">
					<view class="group-name">{{postDetail.group.name}}</view>
					<view class="post-count-comment-count">
						<text>{{postDetail.group.postCount}}帖子</text>
						<text>{{postDetail.group.commentCount}}回复</text>
					</view>
				</view>
				<view class="_group-right">
					<view>更多</view>
				</view>
			</view>
			<!-- 帖子点赞等操作 -->
			<view class="post-detail-operate">
				<view
					:class="postDetail.interaction.likeStatus?'_for _hover':'_for'"
					@click="clickOperatePostButton('like')">
					<text class="iconfont icon-dianzan"></text>
					<text class="_text">{{postDetail.likeCount}}</text>
				</view>
				<view
					:class="postDetail.interaction.followStatus?'_for _hover':'_for'"
					@click="clickOperatePostButton('follow')">
					<text class="iconfont icon-shoucang"></text>
					<text class="_text">{{postDetail.followCount}}</text>
				</view>
				<view
					class="_for"
					@click="clickUrlButton(postDetail.url)">
					<text class="iconfont icon-lianjie"></text>
					<text class="_text">链接</text>
				</view>
				<view
					class="_for"
					@click="clickShareButton">
					<text class="iconfont icon-fenxiang"></text>
					<text class="_text">分享</text>
				</view>
			</view>
			<!-- 帖子管理相关 -->
			<view class="post-admin">
				<template v-for="item in postDetail.manages">
					<view
						@click="clickManagesButton(item)"
						class="post-admin-for">
						{{item.name}}
					</view>
				</template>
				<!-- 编辑帖子 -->
				<view
					@click="clickEditPostButton"
					v-if="postDetail.controls.canEdit"
					class="post-admin-for">
					{{$t('edit')}}
				</view>
				<!-- 删除帖子 -->
				<view
					v-if="postDetail.controls.canDelete"
					class="post-admin-for"
					@click="clickDeletePostButton">
					{{$t('delete')}}
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment-info">
				<view class="left">
					<view class="Xian" style="background: #409EFF;"></view>
					<view>{{$t('comments')}}</view>
				</view>
				<view class="right">
					<text>{{postDetail.commentCount}}{{$t('comments')}}</text>
				</view>
			</view>
			<view
				class="quick-reply"
				v-if="configJSON.quickReply && configJSON.quickReply.length">
				<view
					class="quick-reply-for"
					v-for="item in configJSON.quickReply"
					@click="clickQuickReplyButton(item)">
					<text class="iconfont icon-yinyong"></text>
					<text class="quick-reply-for-text">{{item}}</text>
				</view>
			</view>
			<list-comment :pid="postPid" ref="listCommentRef"></list-comment>
			
			<view style="width: 100%;height: 102rpx;"></view>
			
			<!-- 除了H5平台都存在 -->
			<!-- #ifndef H5 -->
			<view
				@click="$_to(`editor/editor?type=comment&editType=one&commentPid=${postPid}&focus=1&height=100`)"
				class="footer-button">
				<view
					@click.stop="$_to(`editor/editor?type=comment&editType=one&commentPid=${postPid}&height=100&audio=1`)"
					class="_audio">
					<text class="iconfont icon-yuyin"></text>
				</view>
				<view class="_textarea">
					<input
						maxlength="-1"
						:disabled="true"
						placeholder="说点什么吧..."
						placeholder-style="color:#C0C4CC;"></input>
				</view>
				<view
					class="_smile"
					@click.stop="$_to(`editor/editor?type=comment&editType=one&commentPid=${postPid}&height=100&emoji=1`)">
					<text class="iconfont icon-smile"></text>
				</view>
				<view class="_add-circle">
					<text class="iconfont icon-add-circle"></text>
				</view>
			</view>
			<!-- #endif -->
			<!-- 只有H5存在 -->
			<!-- #ifdef H5 -->
			<view
				@click="$_to(`editor/editor?type=comment&editType=one&commentPid=${postPid}&focus=1&height=100`)"
				class="footer-button" style="display: flex;align-items: center;justify-content: center;">
				我要回帖
			</view>
			<!-- #endif -->
			
		</template>
		<template v-else>
			<view class="_loading">
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
				<view class="skeleton-screen"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postPid:"",
				postDetail:null,
				postLikeList:[],
				configJSON:null,
				editorConfigsJSON:null,//编辑器配置信息.前端
				editorConfigJSON:null,//
			}
		},
		onShow() {
			// 一些回调，查阅 DeveloperGuide.md
			if(
				uni.getStorageSync('editorPublishSuccess') ||
				uni.getStorageSync('extendWebView') ||
				uni.getStorageSync('noticeCommentDeleteSuccess')
			)
			{
				this.getPostDetail();
				this.keyboardStatus = false;
				this.$refs.listCommentRef.getList();
				uni.removeStorageSync('extendWebView');
				uni.removeStorageSync('editorPublishSuccess');
				uni.removeStorageSync('noticeCommentDeleteSuccess');
			}
		},
		onLoad(e) {
			this.postPid = e.pid;
			this.getPostDetail();
		},
		// 上拉加载更多
		onReachBottom() {
			this.$refs.listCommentRef.clickMoreButton();
		},
		methods: {
			// 点击，复制链接按钮
			clickUrlButton(url){
				uni.setClipboardData({ data: url });
			},
			getPostDetail(){
				this.$_request(
					"GET",`/api/fresns/v1/post/${this.postPid}/detail`,{},
					(res) => {
						this.postDetail = res.data.data.detail;
						this.getPostJSON();
						// 获取点赞列表
						this.getPostInteractionLike();
						// 获取表情
						this.getSticker();
					}
				)
			},
			// 获取点赞列表
			getPostInteractionLike(){
				this.$_request(
					"GET",`/api/fresns/v1/post/${this.postPid}/interaction/likers`,
					{
						"filterType":"whitelist",
						"filterKeys":"avatar"
					},
					(res) => {
						this.postLikeList = res.data.data.list;
					}
				)
			},
			getPostJSON(){
				uni.request({
					url:this.$_configFile() + "post.json",
					success: (res) => {
						this.configJSON = res.data;
						this.getEditorConfigsJSON();
					}
				})
			},
			// 编辑器配置信息.前端
			getEditorConfigsJSON(){
				uni.request({
					url:this.$_configFile() + "editor.json",
					success: (res) => {
						this.editorConfigsJSON = res.data;
					}
				})
			},
			// 其他文件下载提示
			clickDocumentButton(){
				uni.showToast({
					title: "其他文件需要在电脑端下载",
					duration: 1500,
					icon: "none"
				});
			},
			// 操作帖子按钮，比如点赞之类的
			clickOperatePostButton(type){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":type,
						"type":"post",
						"fsid":this.postPid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							this.getPostDetail();
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: 'none'
							});
						}
					}
				)
			},
			// 请求表情
			getSticker(){
				this.$_request(
					"GET", "/api/fresns/v1/global/stickers", {},
					(res) => {
						this.emojiCategories = res.data.data;
					}
				)
				uni.request({
					url: this.$_configFile() + "editor.json",
					success: (res) => {
						this.editorConfigJSON = res.data;
					}
				})
			},
			// 左侧切换表情按钮
			clickSwitchEmojiButton(type, item) {
				this.emojiHover = type;
				if (type != 'emoji') {
					this.emojiNativeList = item.stickers;
				}
			},
			// 点击，删除帖子按钮
			clickDeletePostButton(){
				uni.showModal({
					title: this.$t('tip'),
					content: this.$t('deleteCurrent'),
					success: (res) => {
						if(res.confirm){
							this.$_request(
								"DELETE",`/api/fresns/v1/post/${this.postPid}`,
								{},
								(ref) => {
									if(ref.data.code === 0){
										uni.setStorageSync('noticePostDeleteSuccess', 'update');
										uni.navigateBack()
									}else{
										uni.showToast({
											title: ref.data.message,
											duration: 2000
										});
									}
								}
							)
						}
					}
				});
			},
			// 点击，编辑帖子
			clickEditPostButton(){
				uni.showLoading();
				this.$_request(
					"POST",`/api/fresns/v1/editor/post/edit/${this.postPid}`,{},
					(res) => {
						uni.hideLoading()
						this.$_to('editor/editor?type=post&editType=edit&did='+res.data.data.detail.did)
					}
				)
			},
			// 管理帖子
			clickManagesButton(item){
				let replacedUrl = item.appUrl.replace(/\{accessToken\}/g, `${this.$_extensionPluginAccessToken()}`)
					.replace(/\{postMessageKey\}/g, `${item.fskey}`)
					.replace(/\{viewType\}/g, 'detail')
					.replace(/\{uid\}/g, '')
					.replace(/\{pid\}/g, `${this.postPid}`)
					.replace(/\{cid\}/g, '');
				this.$_to("pages/extendWebView?url="+encodeURIComponent(replacedUrl))
			},
			// 点击，位置详情按钮
			cliclGeotagButton(latitude,longitude){
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: (res) => {}
				});
			},
			// 分享按钮
			clickShareButton(){
				// APP 调用系统底层分享
				// #ifdef APP-PLUS
				uni.shareWithSystem({
					summary: this.postDetail.title?this.postDetail.title:this.$_filterHtml(this.postDetail.content),
					href: this.postDetail.url,
					success: (res) => {}
				})
				// #endif
				
				// 微信小程序提示右上角分享
				// #ifdef MP-WEIXIN
				uni.showToast({
					title: '请点击右上角 ... 进行分享',
					icon: 'none',
					duration: 1500
				});
				// #endif
				
				// 除了APP和小程序，直接复制地址
				// #ifndef APP-PLUS || MP-WEIXIN
				uni.setClipboardData({
					data: this.postDetail.url,
					success: (res) => {}
				});
				// #endif
			},
			// 快速回复按钮
			clickQuickReplyButton(content){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/editor/comment/publish",
					{
						"commentPid":this.postPid,
						"content":content
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							this.$refs.listCommentRef.getList();
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon:'none'
							});
						}
					}
				)
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.postDetail.title?this.postDetail.title:this.$_filterHtml(this.postDetail.content),
				path: '/pages/post/detail?pid=' + this.postPid
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.postDetail.title?this.postDetail.title:this.$_filterHtml(this.postDetail.content),
				path: '/pages/post/detail?pid=' + this.postPid
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.postDetail = null;
			this.configJSON = null;
			this.editorConfigsJSON = null;
			this.getPostDetail();
			this.keyboardStatus = false;
			this.$refs.listCommentRef.getList();
			this.$nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	}
</script>

<style lang="scss">
page{
	background: #FFF;
}
.detail{
	background: #FFF;
	.title{
		padding: 25rpx;
		padding-bottom: 0;
		font-size:40rpx;
		line-height: 65rpx;
	}
	.author{
		display: flex;
		align-items: center;
		margin: 25rpx 25rpx 0 25rpx;
		.avatar{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			flex-shrink: 0;
			border-radius: 100rpx;
			image{
				width: 100%;
			}
		}
		.author-center{
			flex: 1;
			height: 80rpx;
			display: flex;
			justify-content: center;
			flex-flow: column;
			margin: 0 20rpx;
			.author-center-top{
				line-height: 28rpx;
				padding: 0 0 10rpx 0;
				.nickname{
					font-size: 28rpx;
				}
				.roleName{
					font-size: 22rpx;
					color: $placeholder;
					padding-left: 15rpx;
				}
			}
			.author-center-bottom{
				line-height: 22rpx;
				display: flex;
				align-items: center;
				padding-top: 0rpx;
				.createdTimeAgo{
					font-size: 22rpx;
					color: $placeholder;
				}
				.post-geotag{
					display: flex;
					align-items: center;
					line-height: 22rpx;
					padding-left: 10rpx;
					text{
						font-size: 22rpx;
						color: $placeholder;
					}
				}
			}
		}
		.author-center-right{
			height: 80rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			view{
				border: 1px solid $theme;
				font-size: 22rpx;
				line-height: 22rpx;
				color: $theme;
				padding: 10rpx 15rpx;
				border-radius: 80rpx;
			}
		}
	}
	.like-list{
		padding: 25rpx 25rpx 0 50rpx;
		display: flex;
		flex-wrap: wrap;
		view{
			width: 50rpx;
			height: 50rpx;
			overflow: hidden;
			border-radius: 100rpx;
			border: 1px solid #FFF;
			margin-left: -25rpx;
			position: relative;
		}
		._more{
			width: 50rpx;
			height: 50rpx;
			background: $border;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 30rpx;
			margin-left: 0;
			text{
				font-size: 30rpx;
			}
		}
	}
	.content{
		margin:25rpx;
		.youransns-hide-content{
			background: $background;
			color: $placeholder;
			border: 1px dotted $border;
			padding: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28rpx;
			font-size: 28rpx;
			margin: 25rpx 0;
		}
	}
	.quoted-post{
		margin: 0 25rpx;
		.icon-yinyong1{
			color: $placeholder;
			font-size: 60rpx;
			padding-right: 10rpx;
		}
	}
	.file{
		.file-title{
			display: flex;
			align-items: center;
			line-height: 28rpx;
			margin: 0 0 0 25rpx;
			view{
				width: 10rpx;
				height: 25rpx;
				background: $theme;
				border-radius: 100rpx;
			}
			text{
				font-size: 28rpx;
				padding-left: 15rpx;
			}
		}
	}
	.group{
		margin: 25rpx 25rpx 0 25rpx;
		background: $background;
		display: flex;
		align-items: center;
		padding: 20rpx;
		.group-cover{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 15rpx;
		}
		.group-name-post-count-comment-count{
			flex: 1;
			.group-name{
				font-size: 28rpx;
				line-height: 28rpx;
			}
			.post-count-comment-count{
				line-height: 22rpx;
				padding-top: 10rpx;
				text{
					font-size: 22rpx;
					padding-right: 15rpx;
					color: $placeholder;
				}
			}
		}
		._group-right{
			flex-shrink: 0;
			display: flex;
			align-items: center;
			view{
				line-height: 28rpx;
				font-size: 28rpx;
				border-left: 1px solid $darkBlue;
				padding-left: 15rpx;
				color: $darkBlue;
			}
		}
	}
	.post-detail-operate{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 25rpx;
		._for{
			width: 100rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			border: 1px solid $border;
			border-radius: 100rpx;
			margin: 0 12.5rpx;
			background: $background;
			text{
				color: $placeholder;
			}
			.iconfont{
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 40rpx;
			}
			._text{
				font-size: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 18rpx;
				padding-top: 5rpx;
			}
		}
		._hover{
			border: 1px solid $theme;
			text{
				color: $theme;
			}
		}
	}
	.post-admin{
		border-top: 1px solid $border;
		margin-top: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.post-admin-for{
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28rpx;
			font-size: 28rpx;
			padding-right: 25rpx;
			padding-top: 25rpx;
		}
	}
	.comment-info{
		display: flex;
		align-items: center;
		padding: 25rpx;
		border-top: 25rpx solid $background;
		border-bottom: 1px solid $background;
		margin-top: 25rpx;
		.left{
			display: flex;
			align-items: center;
			.Xian{
				width: 10rpx;
				height: 28rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}
		}
		.right{
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: flex-end;
			line-height: 22rpx;
			text{
				padding-left: 15rpx;
				font-size: 22rpx;
				color: $placeholder;
			}
		}
	}
	.quick-reply{
		margin: 25rpx 25rpx 0 25rpx;
		background: $background;
		border-radius: 10rpx;
		.quick-reply-for{
			display: flex;
			border-bottom: 1px dashed $border;
			padding: 25rpx;
			line-height: 28rpx;
			text{
				font-size: 28rpx;
				color: $placeholder;
			}
			.iconfont{
				padding-right: 10rpx;
			}
		}
		.quick-reply-for:last-child{
			border-bottom: 0;
		}
	}
	.footer-button{
		width: 100%;
		height: 100rpx;
		background: #f7f7f7;
		border-top: 1rpx solid #d2d2d2;
		position: fixed;
		z-index: 800;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		._audio{
			height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 25rpx;
			line-height: 35rpx;
			flex-shrink: 0;
			text{
				font-size: 35rpx;
				display: block;
				border: 4rpx solid $primary;
				width: 45rpx;
				height: 45rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}
		}
		._textarea{
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			input{
				background: #FFF;
				height: 70rpx;
				width: 100%;
				font-size: 28rpx;
				line-height: 40rpx;
				padding-left: 15rpx;
			}
		}
		._smile{
			flex-shrink: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 25rpx;
			line-height: 60rpx;
			text{
				font-size: 60rpx;
			}
		}
		._add-circle{
			flex-shrink: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 10rpx;
			line-height: 60rpx;
			padding-right: 20rpx;
			text{
				font-size: 60rpx;
			}
		}
	}
	._loading{
		background: #FFF;
		padding: 25rpx 25rpx 1rpx 25rpx;
		.skeleton-screen{
			width: 100%;
			height: 50rpx;
			margin-bottom: 25rpx;
		}
	}
}
</style>
